<template>
  <div class="container">
    <el-card class="box-card" shadow="always">
      <el-form
          ref="ruleForm"
          :model="algorithm"
          :rules="rules"
          label-width="120px">
      <br>
      <el-form-item label="算法名" prop="title">
        <el-col :span="8">
          <el-input v-model="algorithm.title" width="100"/>
        </el-col>
      </el-form-item>

      <el-form-item label="算法类型">
        <el-radio-group v-model="algorithm.type">
          <el-radio :label="0" border>预处理算法</el-radio>
          <el-radio :label="1" border>分析算法</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="备注">
        <el-input id="input-textarea" :rows="5" v-model="algorithm.description" type="textarea" maxlength="300"/>
      </el-form-item>

      <el-form-item label="上传算法">
        <el-upload
            ref="upload"
            class="upload-demo"
            action="/api/algManage/uploadAlg"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :auto-upload=false
            accept=".jar"
            multiple
            :before-upload="beforeUpload"
            :limit="1"
            :on-exceed="handleExceed"
            :on-change="changeFile"
            :file-list="fileList"
            :on-success="handleSuccess"
        >
          <template #trigger>
            <el-button size="small" type="primary">点击上传</el-button>
          </template>
            <div class="el-upload__tip">
              上传大小不超过1Mb
            </div>
          <el-button type="primary" size="medium" @click="saveAlg('ruleForm')">保存</el-button>
          <el-button type="primary" size="medium" @click="resetData" id="reset-btn">重置</el-button>
        </el-upload>
      </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>
import algorithm from "../../api/admin/admin";

export default {
  data() {
    return {
      algorithm: {
        title: null,
        type: 0,
        location: null,
        userId: null, //这个应该是拿到的管理员的id
        description: null
      },
      adminInfo: [],
      fileList: [],
      rules: {
        title: [
          {
            required: true,
            message: '请输入算法名',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {
    this.adminInfo = JSON.parse(localStorage.getItem("SESSION_KEY_USERID"));
    this.algorithm.userId = this.adminInfo
    // console.log(this.adminInfo)
  },
  methods: {
    saveAlg(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.fileList.length === 1){
            console.log(this.algorithm.title)
            console.log(this.algorithm.type)
            console.log(this.algorithm.userId)
            console.log(this.algorithm.description)
            // 调用 element-ui的上传方法
            this.$refs.upload.submit();
          }else {
            this.$message({
              type: 'error',
              message: '您还有算法没上传噢，请上传后再保存！'
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetData(){
      this.algorithm.title = null;
      this.algorithm.type = 0;
      this.algorithm.description = null;
      this.fileList = [];
    },
    //取消上传
    handleRemove(file, fileList) {
      this.fileList = fileList;
      console.log("取消上传"+file, fileList)
    },
    // 监听图片上传成功的事件
    handleSuccess (response) {
      console.log(response)
      console.log("dsf="+response.data.item);
      this.algorithm.location=response.data.item;
      //在下面上传所有信息
      // 包含的参数有算法名，算法类型，算法存储位置(文件名)，备注，用户id
      algorithm.addAlg(this.algorithm).then(resp => {
        this.$message({
          type: 'success',
          message: '添加算法成功'
        })
        // 上传后跳转页面
        this.$router.push("/admin/algorithm")
      }).catch(resp => {
        this.$message({
          type: 'error',
          message: resp.message
        })
      })
    },
    beforeUpload(file) {
      this.isLt2k = file.size / 1024  > 1024 ? '1':'0';
      if(this.isLt2k === '1') {
        this.$message({
          message: '上传文件大小不能超过1Mb!',
          type: 'error'
        });
        return false;
      }
      return this.isLt2k === '0';
    },
    changeFile(file, fileList) {
      this.fileList.pop()
      this.fileList.push(file)
    },
    //点击文件的钩子
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
          `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
              files.length + fileList.length
          } 个文件`,
      )
    },
    beforeRemove(file, fileList) {
      // console.log("len ===> " + fileList.length)
      return this.$confirm(`确定移除 ${file.name}？`)
    },
  },
}
</script>

<style scoped>

</style>
